<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Tooltip 样式 | Comic</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/tooltip-comic.css" />
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body class="color-6">
		<div class="container">
			<div class="content">
				<header class="codrops-header">
					<h1>Tooltip 样式 <span>展示各种样式的Tooltip效果</span></h1>	
					<nav class="codrops-demos">
						<a href="index.html">Classic</a>
						<a href="round.html">Round</a>
						<a href="curved.html">Curved</a>
						<a href="sharp.html">Sharp</a>
						<a href="bloated.html">Bloated</a>
						<a href="box.html">Box</a>
						<a class="current-demo" href="comic.html">Comic</a>
						<a href="line.html">Line</a>						
						<a href="flip.html">Flip</a>
					</nav>
				</header>
				<div class="dummy dummy-avatar">
					<div class="tooltip tooltip-effect-1">
						<a href="#"><img src="img/user2.png" alt="user2"/><h4>Jerry Greenfield</h4></a>
						<span class="tooltip-content">That design needs some brighter colors...</span>
						<div class="tooltip-shape">
							<svg viewBox="0 0 200 150" preserveAspectRatio="none">
								<path id="path1" d="M184.112,144.325c0.704,2.461,3.412,4.016,5.905,3.611c2.526-0.318,4.746-2.509,4.841-5.093
								c0.153-2.315-1.483-4.54-3.703-5.155c-2.474-0.781-5.405,0.37-6.612,2.681c-0.657,1.181-0.845,2.619-0.442,3.917"/>
								<path id="path2" d="M159.599,137.909c0.975,3.397,4.717,5.548,8.161,4.988c3.489-0.443,6.558-3.466,6.685-7.043
								c0.217-3.19-1.805-6.34-5.113-7.118c-3.417-1.079-7.469,0.508-9.138,3.701c-0.91,1.636-1.166,3.624-0.612,5.414"/>
								<path id="path3" d="M130.646,125.253c1.368,4.656,6.393,7.288,10.806,6.718c4.763-0.451,9.26-4.276,9.71-9.394
								c0.369-3.779-1.902-7.583-5.244-9.144c-5.404-2.732-12.557-0.222-14.908,5.448c-0.841,1.945-1.018,4.214-0.388,6.294"/>
								<path id="path4" d="M49.933,13.549c10.577-20.192,35.342-7.693,37.057,1.708c3.187-5.687,8.381-10.144,14.943-12.148
								c10.427-3.185,21.37,0.699,28.159,8.982c15.606-3.76,31.369,4.398,35.804,18.915c3.269,10.699-0.488,21.956-8.71,29.388
								c0.395,0.934,0.762,1.882,1.064,2.873c4.73,15.485-3.992,31.889-19.473,36.617c-5.073,1.551-10.251,1.625-15.076,0.518
								c-3.58,10.605-12.407,19.55-24.386,23.211c-15.015,4.586-30.547-0.521-39.226-11.624c-2.861,1.991-6.077,3.564-9.583,4.636
								c-18.43,5.631-32.291,2.419-38.074-19.661c-2.645-10.096,3.606-18.51,3.606-18.51C2.336,71.24,1.132,49.635,16.519,42.394
								C-1.269,28.452,18.559,0.948,37.433,6.818C42.141,8.282,49.933,13.549,49.933,13.549z"/>
							</svg>
						</div>
					</div>
					<div class="tooltip tooltip-effect-2">
						<a href="#"><img src="img/user3.png" alt="user3"/><h4>Caroline Wild</h4></a>
						<span class="tooltip-content">Today we have an interesting typographic challenge...</span>
						<div class="tooltip-shape">
							<svg viewBox="0 0 200 150" preserveAspectRatio="none">
								<polygon points="29.857,3.324 171.111,3.324 196.75,37.671 184.334,107.653 104.355,136.679 100,146.676 96.292,136.355 16.312,107.653 3.25,37.671"/>
							</svg>
						</div>
					</div>
				</div>
				<p class="info">Note that the transform-origin in percentages for the SVG path does not work correctly in Firefox.</p>
			</div><!-- /content -->
		</div><!-- /container -->
	</body>
</html>